<template>
  <div>
    <Container>
      <el-row :gutter="30">
        <el-col :md="6">
          <MainPhoto />
          <MainContact class="mt-20px" />
          <PostNewPostComponent class="mt-20px" :post_id="post_id" />
          <PostHotPostComponent class="mt-20px" :post_id="post_id" />
        </el-col>
        <el-col :md="18">
          <el-row class="bg-white p-10px">
            <el-col :md="24" class="breadcrumb p-10px">
              <span>当前位置：</span>
              <el-breadcrumb style="display: inline-block">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="'/post/list/' + post?.categories[0].id">{{ post?.categories[0].name }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ post?.post_title }}</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :md="24" class="mt-10px">
              <PostContentComponent>
                <template #post-footer>
                  <PostFooterNoteComponent />
                  <PostRecommendComponent :post_id="post_id" />
                  <PostRelationComponent :post_id="post_id" />
                </template>
              </PostContentComponent>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </Container>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
let id = route.params.id;
if (Array.isArray(id)) {
  id = id[0];
}
const post_id = ref<number>(Number(id));
const usePost = usePostStore();
const { data: post, pending } = await useAsyncData('post_by_category_id', () => get_post_info(post_id.value), { server: true });

if (post.value) {
  usePost.post = post.value;
}
</script>

<style scoped>
.breadcrumb {
  background-color: #f5f5f5;
}
</style>
